<template>
  <div class="color-container">
    <color-tool/>
    <h2 class="title">纯色</h2>
    <div class="color-list clear">
      <div
        v-for="item in color"
        @click="copy(item)"
        :key="item"
        :style="{'background-color': item}"
        class="item"
      >{{item}}</div>
    </div>
    <h2 class="title">渐变色</h2>
    <div class="color-list clear">
      <div
        v-for="item in gradient"
        :key="item"
        @click="copy(item)"
        :style="{'background': item}"
        class="item"
      >{{item}}</div>
    </div>
  </div>
</template>

<script>
import { copy } from 'kuan-utils'

import ColorTool from './ColorTool'

export default {
  components: {
    ColorTool
  },
  title: '颜色收藏',
  data() {
    return {
      color: [
        '#F3F9FF',
        '#fafafa',
        '#faf9f7',
        '#f5f5f5',
        '#f4f4f4',
        '#f5f6f7',
        '#f2f3f8',
        '#e7e7ef',
        '#f5f5d5',
        '#FACC14',
        '#F04864',
        '#2FC25B',
        '#1da57a',
        '#13C2C2',
        '#1890FF',
        '#3296fa',
        '#363636',
        '#24292e'
      ],
      gradient: [
        'linear-gradient(45deg, #155799, #159957)',
        'linear-gradient(45deg, #02E5C9, #01B0C9)',
        'linear-gradient(45deg, #F3F9FF, #33A1FA)',
        'linear-gradient(45deg, #56CCF2, #2F80ED)',
      ]
    }
  },
  methods: {
    copy(str) {
      if (!str) return
      copy(str)
      this.$toast(`${str}已复制`)
    }
  }
}
</script>

<style lang="scss" scoped>
.color-container {
  max-width: 100%;
  width: 1080px;
  margin: 10px auto;
  .color-list {
    padding-bottom: 40px;
  }
  .item {
    width: 150px;
    height: 150px;
    margin: 15px;
    border-radius: 5px;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.5;
    color: black;
    cursor: pointer;
  }
  .title {
    line-height: 2;
    font-size: 20px;
    padding: 0 15px;
  }
}
@media (max-width: 1080px) {
  .color-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
}
</style>
